<!--
 * @Author: luojiajun
 * @Email: company.kachun@gmail.com
 * @Date: 2021-07-01 09:12:45
 * @FilePath: /src/views/dataManagement/system/approve/components/approveApiDialog.vue
 * @LastEditTime: 2021-07-19 14:53:12
 * @LastEditors: luojiajun
-->
<template>
    <el-dialog title="接口服务申请详情" :visible.sync="dialogVisible" :before-close="handleClose" width="1280px">
        <div class="approve-item-dialog">
            <el-form ref="form" :model="form" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-table :data="form.list" border>
                            <el-table-column type="index" label="序号" width="50"></el-table-column>
                            <el-table-column label="申请类型" prop="applyType" align="center">
                                <template slot-scope="scope">
                                    <span>{{ $enum.APPROVE_TYPE_MAP[scope.row.applyType] || '-' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="接口中文名称" prop="apiName" align="center">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.apiInfoVersionList[0].apiName || '-' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="接口英文名称" prop="apiNameEn" align="center">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.apiInfoVersionList[0].apiNameEn || '-' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="接口所在组" prop="groupName" align="center"></el-table-column>
                            <el-table-column label="接口地址" prop="requestPath" align="center" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span>{{ scope.row.apiInfoVersionList[0].requestPath || '-' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="版本号" prop="version" align="center">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.apiInfoVersionList[0].apiVersion || '-' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="审批状态" prop="status" align="center">
                                <template slot-scope="scope">
                                    {{ formatStatus(scope.row.status) || '-' }}
                                </template>
                            </el-table-column>

                            <el-table-column :label="applyType == 2 ? '订阅人' : '发布人'" prop="approver" align="center">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.userName || '-' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column :label="applyType == 2 ? '订阅人所在组' : '发布人所在组'" prop="userGroupName" align="center"></el-table-column>

                            <el-table-column label="申请时间" prop="createTime" align="center">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.apiInfoVersionList[0].createTime || '-' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="申请原因" prop="applyReason" align="center" show-overflow-tooltip></el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <span slot="footer" class="approve-item-dialog__footer">
            <template v-if="formatStatusCode(form.status) == 2">
				<el-button type="primary" style="margin-right:10px;" @click="handleAudit(1)">通过</el-button>
                <!-- 驳回弹窗 -->
				<el-popover placement="top" width="356" v-model="rejectVisible">
					<p style="text-align: center;">备注</p>
					<el-input type="textarea" placeholder="填写驳回原因" v-model="comment" :autosize="{ minRows: 6}"></el-input>
					<div style="text-align: center; margin:20px 0 0">
						<el-button type="primary" @click="handleAudit(0)">确定</el-button>
						<el-button type="info" @click="rejectVisible = false">取消</el-button>
					</div>
					<el-button slot="reference">驳回</el-button>
				</el-popover>
				<el-button style="margin-left:10px;" @click="onClose">返回</el-button>
			</template>
			<template v-else>
				<el-button type="info" v-if="formatStatusCode(form.status) == 0" disabled>已驳回</el-button>
				<el-button type="info" v-else-if="formatStatusCode(form.status) == 1" disabled>已通过</el-button>
				<el-button style="min-width:84px;" @click="onClose">返回</el-button>
			</template>
        </span>
    </el-dialog>
</template>

<script>
import { getApply, auditApply } from "@/api/dataManagement/system/apply";

export default {
    name: 'approveApiDialog',
    model: {
        prop: "visible",
        event: "change"
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        itemId: {
            type: [String, Number],
            default: 0
        },
    },
    data() {
        return {
            loading: false,
            form: {
                list: [],
                status: 0,
                approver: ''
            },
            rejectVisible: false,
            comment: '',
            applyType: 2,
        };
    },
    watch: {
        currentId(value) {
            if (value && value > 0) {
                this.getApplyItem()
            }
        }
    },
    computed: {
        dialogVisible: {
            get() {
                return this.visible;
            },
            set(newValue) {
                this.$emit("change", newValue);
            }
        },
        currentId: {
            get() {
                return this.itemId;
            },
            set(value) {
                this.$emit("update:itemId", value);
            }
        },
    },
    methods: {
        resetForm() {
            this.comment = ''
            this.rejectVisible = false
            this.currentId = 0
            // this.form = {}
            this.form.list = []
            this.form.status = 0
            this.applyType = 2
        },
        onClose() {
            this.resetForm()
            this.dialogVisible = false
        },
        handleClose(done) {
            this.resetForm()
            done()
        },
        formatStatus(status) {
            // if (this.form.approver) {
            //     return this.$enum.TABLE_APPROVE_STATUS_MAP[status]
            // } else {
            //     return this.$enum[this.$enum.APPROVE_STATUS_KEY_MAP[this.applyType]][status]
            // }
            return this.$enum[this.$enum.APPROVE_STATUS_KEY_MAP[this.applyType]][status]
        },
        formatStatusCode(status) {
            // if (this.form.approver) {
            //     return status
            // } else {
            //     return this.$enum[this.$enum.APPROVE_STATUS_CODE_KEY_MAP[this.applyType]][status]
            // }
            return status
        },
        getApplyItem() {
            if (this.loading) return false
            this.loading = true

            this.form.list = []
            this.form.status = 0
            this.applyType = 2

            getApply(this.currentId).then(res => {
                this.applyType = res.data.applyType
                this.form.status = res.data.status
                this.form.approver = res.data.approver
                this.form.list = [res.data]
                this.loading = false
            }).catch(err => {
                this.loading = false
            })
        },
        /**
         * TODO 对接接口服务审批接口
         */
        handleAudit(status) {    
            if (this.loading) return false
            this.loading = true

            // let statusMap = {}
            // // 订阅
            // if (this.applyType == 2) statusMap = { 1: 0, 0: 2 }
            // // 发布
            // if (this.applyType == 3) statusMap = { 1: 2, 0: 3 }

            let params = {
                id: Number(this.form.list[0].id),
                status: Number(status),
                // status: Number(statusMap[status])
            }
            if (status == 0) {
                params.comment = this.comment
            }
            
            auditApply(params).then(res => {
                if (res.code == 200) {
                    this.msgSuccess("操作成功");
                    this.onClose()
                    this.$emit("success", true);
                }
                this.loading = false
            }).catch(err => {
                this.loading = false
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.approve-item-dialog {
    &__footer {
        display: flex;
        justify-content: center;
    }
}
</style>